<template>
  <div class="drawerbox">
    <div class="drawerbtn" @click="drawer = !drawer">

    </div>
    <el-drawer v-model="drawer" :with-header="false" size="40%" @open="opendrawer">
      <div class="drawerHead">
        <div class="img"></div>
        <div>vue配置</div>

      </div>
      <el-card class="drawerCard">
        <el-form :model="form">

          <el-form-item label="elementplus国际化">
            <el-checkbox-group v-model="form.type" @change="changeType">
              <el-checkbox :value="item.name" name="type" v-for="item in IN_type" :key="item.id">
                {{ useOptionconfigStore().defaultSettings.in?'中文':'English' }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>

    </el-drawer>
  </div>
</template>

<script setup>
import { ElLoading } from 'element-plus'
import { useOptionconfigStore } from '@/store/modules/optionconfig'
import { IN_type } from '@/utils/constant';
import { onMounted } from 'vue';
const drawer = ref(false)
const form = reactive({
  type: []
})
const changeType = (e) => {
  if (e) {
    const loading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    setTimeout(() => {
      useOptionconfigStore().changin()
      loading.close()
    }, 2000)
   
}
}

const opendrawer = () => {
  form.type = useOptionconfigStore().defaultSettings.in ? ['ele'] : ['']

}
onMounted(() => {
  opendrawer
})

</script>

<style lang="scss" scoped>
.drawerbox {
  .drawerbtn {
    height: 50px;
    width: 50px;
    position: fixed;
    top: 50%;
    right: -30px;
    background: #1C7EEA;
    border-radius: 50%;
    background-image: url('../../assets/vue.svg');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 999;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    opacity: 0.5;

    &:hover {
      right: 0;
      opacity: 1;
    }
  }

  .drawerHead {
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 25px;
    font-weight: 600;
    color: #1C7EEA;

    .img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      background: #1C7EEA;
      border-radius: 50%;
      background-image: url('../../assets/vue.svg');
      background-size: 30px 30px;
      background-repeat: no-repeat;
      background-position: center;
      transition: all 0.3s ease-in-out;

    }
  }

  .drawerCard {
    width: 100%;
    margin-top: 20px;
  }

}
</style>